<script setup lang="ts">

import UiCard from "~/components/common/UiCard.vue";
import {type ChatGPTMessage, useGPTCreateContent, useGPTGernateDrawPropmt} from "~/composables/chathooks";
import {useUtilsUploadFileToOSS} from "~/utils/FileUtils";
import type {TweetData} from "~/utils/jiangying";
// 预设提示词
const pre_set_prompt = ref<string>("请写一篇任意题材的200字左右的推文")


// 一键生成文案
const messages = ref<ChatGPTMessage[]>([])
const {full_contents,contents} = storeToRefs(useWorkEditStore())
watch(messages, (newVal) => {
  // console.log(newVal)
  full_contents.value = newVal.map(item => item.content).join("\n")
}, {
  deep: true
})

/**
 * 一键生成文案，原有的文案基础上添加
 *
 */
const handleTweetGenerateContent = async () => {
  const chatStore = useChatGPTStore()
  await chatStore.init(useAuthStore().user!._id!, useAuthStore().user!.username!)
  const content = await useGPTCreateContent(pre_set_prompt.value, messages) as ChatGPTMessage
}
/**
 * 重新开始生成
 *
 */
const handleTweetClearAndGenerateContent = async () => {
  messages.value = []
  await handleTweetGenerateContent()
}
/**
 * 一键分镜
 */
const handleTweetSplitScene = async () => {
  const scenes=full_contents.value.split("。")
  const  max_length=25
  contents.value=[]
  scenes.forEach((item,index)=>{
    const content={
      id: index,
      content: item,
      prompts: "",
      images: [],
      choose_image_index: 0,
      audio: [],
      roles: 0,
      video:"",
      transition: '',
      video_effect: '',
      animation: ''
    } as TweetData
    contents.value.push(content)
  })
  // console.log(contents.value)
  useSnackbarStore().showSuccessMessage('分镜成功,请继续进入分镜创作！')
}


</script>

<template>
  <v-container>
    <v-card>
      <v-card-title>
        <v-label class="text-h5 font-weight-bold">3.编辑文案</v-label>
      </v-card-title>
      <v-divider></v-divider>

      <v-card-text>
        <v-label class="mb-3">
          <v-icon icon="mdi-file-document-edit-outline"></v-icon>
          预设提示词
        </v-label>
        <v-textarea v-model="pre_set_prompt" rows="3" variant="outlined" density="compact"
                    label="请输入提示词"
                    placeholder="请输入提示词"
                    hide-details="auto"
                    class="mb-3"
        ></v-textarea>
        <!--        一键生成文案-->
        <v-btn color="primary" variant="flat" class="mr-2" text="一键生成文案"
               @click="handleTweetGenerateContent"></v-btn>
        <v-btn color="primary" variant="flat" class="mr-2" text="重新生成文案"
               @click="handleTweetClearAndGenerateContent"></v-btn>
        <v-btn color="primary" variant="flat" class="mr-2" text="一键分镜"
               @click="handleTweetSplitScene"></v-btn>
      </v-card-text>

      <editor-m-d-editor v-model="full_contents"/>
    </v-card>

  </v-container>

</template>

<style scoped lang="scss">

</style>